혼자 공부하는 바이브 코딩 with 클로드 코드 — 딥다이브 학습 노트

출처: 한빛미디어 — 조태호 저자의 바이브 코딩 입문 강의

학습 로드맵

[EP1 바이브 코딩 개념 + 프롬프트] → [EP2 Claude Code 설치 + CLAUDE.md]
                                          ↓
              [EP3 실전 활용 + 세션/컨텍스트 관리]
                          ↓
    [EP4 할루시네이션 검증 + 커스텀 명령어] → [EP5 API 연동 + 외부 모델]
                                                    ↓
                    [EP6 서브 에이전트 + 멀티 에이전트 협업]
                                    ↓
              [EP7 MCP + GitHub/Vercel/Supabase 배포]

선수 지식 (바이브 코딩 특화)

• [ ] 터미널/CMD 기본 명령어 (cd, mkdir, ls/dir)
• [ ] Git 기본 개념 (commit, push, repository)

추천 학습 순서

1. 1회차: EP1~3 순서대로 (개념 → 설치 → 실전 명령어)
2. 2회차: EP4~5 (품질 관리 → API 연동)
3. 3회차: EP6~7 (에이전트 → MCP + 배포)
4. 복습: 플래시카드로 핵심 개념 셀프 테스트

EP1. 바이브 코딩의 시작과 효과적인 프롬프트 작성법

강의 핵심 요약

바이브 코딩이란?

2025년 2월 OpenAI 공동 창업자 안드레이 카파시(Andrej Karpathy)가 제안한 개념. AI와 자연어로 대화하면서 프로그램을 만드는 새로운 개발 패러다임.

AI 코딩 도구 분류

전용 모델형은 로컬 파일에 직접 접근 가능하고, IDE 구독료 없이 모델 사용료만 부과된다.

5W1H 프롬프트 프레임워크

딥다이브: PRD 기반 단계별 개발 전략

바이브 코딩의 핵심 워크플로우는 "AI로 프롬프트를 만들고 → AI로 실행" 패턴이다.

1. AI에게 5W1H 기반 PRD 작성 요청
2. PRD를 단계별 프롬프트로 분할
3. 각 단계를 순차 실행하며 결과 확인
4. 결과가 PRD와 다르면 추가 프롬프트로 수정

왜 단계별로 나누는가?

LLM은 긴 프롬프트에서 중간 요구사항을 누락하기 쉽다. 단계별로 나누면: - 각 단계의 결과를 즉시 검증 가능 - 문제 발생 시 해당 단계만 롤백/수정 - 컨텍스트 윈도우를 효율적으로 사용

⚠️ 최신 업데이트: Claude 4.5 Sonnet/Opus는 200K 토큰 컨텍스트를 지원하여 긴 PRD도 한번에 처리 가능하지만, 단계별 검증이 더 안정적이라는 점은 변하지 않는다.

디자인 지정 팁: 구체적으로 설명하기보다 스타일/테마 이름을 지정하는 것이 효과적. - "구글 스타일로 만들어줘" - "워드프레스 테마 중에서 적절한 것을 선택해서 적용해줘"

실습: 클로드 아티팩트로 빠른 프로토타이핑

Claude 웹 (claude.ai) 에서:

1. "날씨, 뉴스, 시계, 검색바가 포함된 시작 페이지 만들어줘"
   → 아티팩트로 즉시 생성

2. "구글 스타일로 변경해줘"
   → 디자인 수정

3. "오늘의 할 일 목록 기능 추가해줘"
   → 기능 추가

4. Publish → 링크로 공유

핵심 체크포인트

• 바이브 코딩 = AI와 자연어 대화로 프로그램을 만드는 패러다임
• 5W1H 프레임워크로 PRD를 먼저 만들고 → 단계별로 실행
• 요청 → 생성 → 확인 → 수정 사이클의 반복이 핵심 워크플로우

EP2. 클로드 코드 시작하기

강의 핵심 요약

설치 요구사항

# 1. Node.js 설치 (nodejs.org)
node --version   # v18+ 확인

# 2. Git 설치 (git-scm.com)
git --version

# 3. Claude Code 설치
npm install -g @anthropic-ai/claude-code

# 4. 실행
cd /path/to/project
claude

계정 연결 방식

CLAUDE.md — 프로젝트 메모리

# CLAUDE.md 예시

## 프로젝트 구조
- /web — 웹 버전 (HTML/CSS/JS)
- /desktop — 데스크톱 버전 (Python)

## 코딩 규칙
- 모든 파일에 날짜와 시간을 주석으로 표시
- 한글 주석 사용

딥다이브: CLAUDE.md 계층 구조와 실무 활용

CLAUDE.md는 폴더별로 독립적으로 존재할 수 있다. 이것은 모노레포나 멀티 프로젝트 구조에서 핵심적이다.

project/
├── CLAUDE.md          ← 전체 프로젝트 공통 규칙
├── web/
│   └── CLAUDE.md      ← 웹 전용 규칙 (React 스타일 등)
└── api/
    └── CLAUDE.md      ← API 전용 규칙 (REST 규칙 등)

실무 팁: CLAUDE.md는 간결하고 명확하게 작성해야 한다. 너무 많은 내용을 넣으면 매 실행마다 토큰을 소모하고, 지시 간 충돌이 발생할 수 있다.

⚠️ 최신 업데이트: Claude Code는 ~/.claude/ 하위에 사용자 레벨 메모리도 지원한다. # 명령으로 "User memory"를 선택하면 모든 프로젝트에 공통 적용되는 규칙을 저장할 수 있다.

권한 관리: Yes / Yes All

Claude Code가 파일 생성/실행 시 매번 허가를 요청한다.

주의: Yes All은 편리하지만, 의도하지 않은 파일 삭제/덮어쓰기가 발생할 수 있으므로 학습 단계에서는 Yes로 하나씩 확인하는 것이 안전하다.

핵심 체크포인트

• Node.js + Git 설치 → npm install -g @anthropic-ai/claude-code → claude로 실행
• CLAUDE.md = 프로젝트의 기억 장치, /init으로 생성, #으로 규칙 추가
• 계층적 CLAUDE.md로 서브프로젝트별 독립 규칙 적용 가능

EP3. 클로드 코드 실전 활용

강의 핵심 요약

클로드 웹 + 클로드 코드 연계 워크플로우

Claude 웹 (기획/설계)          Claude Code (실행/구현)
─────────────────────          ─────────────────────
1. 5W1H 기반 PRD 작성    →    2. PRD를 단계별 프롬프트로 변환
                               3. 각 단계 순차 실행
                               4. 결과 확인 → 수정 반복

핵심 슬래시 명령어 총정리

세션 재개 방법

딥다이브: 컨텍스트 관리 — 왜 중요하고 어떻게 관리하는가

LLM은 컨텍스트 윈도우 내에서만 정보를 기억한다. Claude Code에서 코드 파일을 읽고, 명령을 실행하고, 결과를 받을 때마다 컨텍스트가 소모된다.

/context 실행 시 시각화:

시스템 프롬프트:  ████░░░░░░  20%
도구(Tools):     ██░░░░░░░░  10%
MCP 도구:        █░░░░░░░░░   5%
메시지(대화):    ████████░░  65%
                              ──
                 남은 용량:    55%

컨텍스트가 부족해지면? 1. 자동 압축(auto compact)이 발생 — 이전 대화 요약 2. 문맥이 끊길 수 있음 (이전 지시사항 누락) 3. /compact 레벨로 압축 강도 조절: - 레벨 1: 가벼운 압축 (최대한 보존) - 레벨 2: 중간 압축 - 레벨 3: 강한 압축 (핵심만 남김)

실무 전략: /context로 주기적으로 확인하고, 30% 이하가 되면 /compact로 수동 압축. 새로운 기능 개발 시 /clear로 깨끗한 상태에서 시작하는 것도 방법.

@ 기호로 파일/폴더 빠른 참조

# @ 입력 후 파일명 일부를 타이핑하면 자동완성
@sc → script.js 선택
@st → styles.css 선택

# 활용 예시
"@script.js 에서 다크모드 관련 함수를 찾아줘"
"@web/ 폴더의 파일들을 분석해서 데스크톱에 최적화되었는지 확인해줘"

이미지 기반 UI 개선 (멀티모달)

Windows 캡처 도구(Snipping Tool)로 화면을 캡처한 뒤, Claude Code에 드래그앤드롭으로 전달하여 디자인 수정 지시 가능.

핵심 체크포인트

• 클로드 웹 = 기획/설계, 클로드 코드 = 실행/구현 — 역할 분담
• /context로 컨텍스트 용량을 주기적으로 확인, /compact로 압축 관리
• @ 기호로 파일/폴더를 빠르게 참조, 이미지 드래그앤드롭으로 UI 개선

EP4. 게임 제작으로 배우는 체계적인 개발과 관리

강의 핵심 요약

할루시네이션과 교차 검증

할루시네이션(Hallucination): AI가 그럴듯하지만 사실과 다른 정보를 확신에 차서 만들어내는 현상.

CLAUDE.md에 검증 기준을 명시하면 Claude Code가 자체적으로 교차 검증을 수행한다.

# CLAUDE.md에 추가할 검증 가이드라인

## 퀴즈 콘텐츠 검증 기준
- 최상급 표현("가장 큰", "최초의", "유일한")이 포함된 문제는 반드시 교차 검증
- 논란의 여지가 있는 정답은 출제 금지
- 수치 데이터(연도, 수량 등)는 반드시 사실 확인

커스텀 명령어 시스템

반복적인 지시를 MD 파일로 저장하여 슬래시 명령으로 실행하는 기능.

저장 위치:
├── ~/.claude-code/commands/     ← 전역 (모든 프로젝트)
└── .claude/commands/            ← 프로젝트 전용

# .claude/commands/quiz-validate.md
# 퀴즈 검증 커스텀 명령어

$ARGUMENTS 카테고리의 퀴즈 문제를 검증합니다:
1. 최상급 표현이 포함된 문제 식별
2. 정답의 정확성 교차 확인
3. 논란 여지가 있는 문제 보고

# 사용법
/quiz-validate 한국사

# 주의: 커스텀 명령어 파일 생성 후 /exit → claude 재실행 필요

딥다이브: 명령어 체이닝과 자동화 파이프라인

&& 연산자로 여러 커스텀 명령어를 순차 연결할 수 있다. 앞 명령이 실패하면 뒤 명령은 실행되지 않는다.

# 체이닝: 문제 추가 → 검증 → 통계
/quiz-add 한국사 hard && /quiz-validate 한국사 && /quiz-stat

통합 명령어: 여러 단계를 하나의 커스텀 명령어로 합칠 수 있다.

# .claude/commands/quiz-daily.md
# 일일 퀴즈 점검 통합 명령어

다음 7단계를 순서대로 실행합니다:
1. 파일 구조 분석
2. 전체 문제 목록 출력
3. 카테고리별 문제 수 확인
4. 최상급 표현 문제 교차 검증
5. 난이도 분포 분석
6. 문제 있는 항목 자동 수정
7. 최종 보고서 생성

핵심 인사이트: "필요한 커스텀 명령어를 스스로 판단해서 만들어줘"라고 Claude Code에 지시하면, 프로젝트를 분석하여 관련 명령어를 자동 생성한다.

/clear vs /compact vs /resume

핵심 체크포인트

• CLAUDE.md에 검증 기준을 명시하면 AI가 자체적으로 교차 검증 수행
• 커스텀 명령어 = .claude/commands/*.md 파일, &&로 체이닝 가능
• Claude Code에게 "명령어를 만들어줘"라고 지시하면 자동 생성

EP5. 클로드 코드에서 API 설정하기

강의 핵심 요약

API 기초 개념

사용자 ←→ 클로드 코드 ←→ 외부 AI API (OpenRouter)
                              ↓
                    이미지 인식 모델 (Gemma)
                    텍스트 생성 모델 (Llama)

오픈라우터(OpenRouter) — AI 모델 통합 플랫폼

여러 AI 모델을 하나의 API 키로 사용할 수 있는 통합 플랫폼.

# .env 파일 (절대 Git에 올리지 말 것)
OPENROUTER_API_KEY=sk-or-v1-xxxxxxxxxxxx

딥다이브: 외부 API 연동의 아키텍처와 보안

.env + .gitignore 보안 패턴

# .env — API 키를 코드와 분리
OPENROUTER_API_KEY=sk-or-v1-xxxxxxxx

# .gitignore — .env가 GitHub에 올라가지 않도록 보호
.env
node_modules/

왜 이렇게 분리하는가?

Spring/Java 개발자에게 익숙한 application.properties + .gitignore 패턴과 동일한 원리. API 키가 GitHub에 노출되면 악용되어 과금 피해가 발생할 수 있다.

⚠️ 최신 업데이트: OpenRouter에서 무료 모델의 Rate Limit이 자주 변경된다. Activity 페이지에서 정기적으로 사용량과 비용을 확인해야 한다. 의도치 않게 유료 모델이 호출될 수 있으므로 월 예산 한도를 설정하는 것이 안전하다.

Rate Limit 대응 전략

모델 A (GPT-4o mini) → Rate Limit 발생!
     ↓
즉시 모델 B (Llama 3.3 7B)로 교체
     ↓
.env에 FALLBACK_MODEL 추가하여 자동 전환 가능

PRD를 클로드 코드 내부에서 작성

EP3까지는 "클로드 웹에서 PRD → 클로드 코드에서 실행" 패턴이었지만, 클로드 코드 안에서 직접 PRD를 MD 파일로 생성할 수도 있다.

# 클로드 코드 내에서:
"냉장고 식재료 인식 → 레시피 추천 앱의 PRD를 3단계로 나누어 MD 파일로 만들어줘"
→ prd-step1.md, prd-step2.md, prd-step3.md 생성
→ 각 단계를 순차 실행

핵심 체크포인트

• 오픈라우터 = 여러 AI 모델을 하나의 API 키로 사용하는 통합 플랫폼
• .env에 API 키 저장, .gitignore에 .env 추가 — 보안 필수
• Rate Limit 발생 시 즉시 다른 모델로 교체, Activity에서 비용 모니터링

EP6. 클로드 코드 AI 에이전트로 개발팀 구성하기

강의 핵심 요약

에이전트(Agent)란?

목표와 규칙을 설정하면 스스로 판단하고 작업을 수행하는 독립적 AI 개체. "무엇을 달성할지"를 지정하면 "어떻게 할지"는 에이전트가 결정.

서브 에이전트 생성

# 에이전트 생성 명령어
/agent

# 에이전트 설정 항목
- 이름: code-reviewer
- 역할: 코드 품질 검토 전문가
- 모델: Sonnet / Opus / Haiku / Inherit from parent
- 권한: All Tools / Read Only / Edit Only / Execute Only / MCP Tools
- 색상: Blue / Green / Orange / ...
- 범위: Project / Personal

저장 위치: .claude/agents/<에이전트명>.md

커스텀 명령어 vs 에이전트

딥다이브: 멀티 에이전트 협업 아키텍처

Claude Code는 에이전트 간 인과관계를 자동 판단하여 순차/병렬 실행을 결정한다.

프롬프트: "코드 리뷰 후 최적화하고, UX 개선해줘"

Claude Code의 판단:
1. 코드 리뷰어 (순차 — 먼저 문제 파악)
     ↓
2. 퍼포먼스 옵티마이저 (순차 — 리뷰 결과 기반)
     ↓
3. UX 디자이너 (순차 — 최적화된 코드 기반)

프롬프트: "백엔드와 프론트엔드를 동시에 개발해줘"

Claude Code의 판단:
├── 백엔드 개발자 (병렬)
└── 프론트엔드 개발자 (병렬)
         ↓ (둘 다 완료 후)
    QA 엔지니어 (순차)

5개 에이전트 개발팀 구성 예시

--dangerously-skip-permissions

# 권한 확인 없이 자동으로 끝까지 실행 (주의!)
claude --dangerously-skip-permissions

주의: 이 옵션은 편리하지만 의도하지 않은 파일 수정/삭제가 발생할 수 있다. 학습/테스트 환경에서만 사용하고, 프로덕션 코드에서는 사용을 자제해야 한다.

핵심 체크포인트

• 에이전트 = 독립적 모델·권한을 가진 AI 역할자, /agent로 생성
• Claude Code가 인과관계를 자동 판단하여 순차/병렬 실행 결정
• 에이전트 이름은 매번 달라질 수 있으므로 생성된 이름을 정확히 사용

EP7. MCP로 클로드 코드의 한계 넘어서기 (완강)

강의 핵심 요약

MCP (Model Context Protocol)란?

Anthropic이 2024년 11월 제안한 표준 통신 규약. AI 모델이 외부 데이터, 도구, 서비스와 연결될 때 사용하는 표준화된 프로토콜.

API vs MCP:

API:  특정 서비스의 기능을 빌려옴 (1:1 연결)
MCP:  여러 API/DB/서비스를 통합 연결 (1:N 연결)

Claude Code (MCP 클라이언트) ←→ MCP 서버 ←→ 외부 서비스
                                    ├── Notion
                                    ├── GitHub
                                    ├── Supabase
                                    └── Playwright

로컬 MCP vs 원격 MCP

MCP 설치/관리 명령어

# 로컬 MCP 설치
claude mcp add <이름> -s <scope> -- <실행 명령>

# 원격 MCP 설치
claude mcp add --transport http <이름> <서버URL>

# 관리
claude mcp list              # 목록 확인
claude mcp remove <이름>     # 삭제
claude mcp get <이름>        # 상세 정보
/mcp                         # 실행 중 상태 확인/인증

Scope 옵션: - local: 현재 프로젝트에서 나만 - project: 프로젝트 팀원과 공유 - user: 내 모든 프로젝트에 적용

딥다이브: 주요 MCP 서버 비교와 실무 활용

Sequential Thinking MCP — 심층 추론

Anthropic 공식 MCP. 프롬프트를 세부 단계로 분해하여 각 단계별 추론을 수행한다.

# CMD
claude mcp add sequential-thinking -s user -- cmd /c npx -y @anthropic/sequential-thinking

# PowerShell
claude mcp add sequential-thinking -s user -- npx @anthropic/sequential-thinking

일반 프롬프트 vs Sequential Thinking 비교: - 일반: 간략한 요약, 핵심만 전달 - Sequential Thinking: 각 단계를 분리하여 더 상세하고 체계적인 분석

배포 파이프라인: GitHub → Vercel → Supabase

1. GitHub MCP → 코드를 저장소에 업로드
2. Vercel → GitHub 저장소를 Import → 자동 배포 (CI/CD)
3. Supabase MCP → 로컬 스토리지 → 클라우드 DB로 전환

결과: 고유 URL로 누구나 접근 가능한 웹앱 + 실시간 데이터 공유

Supabase 연동 핵심

# Supabase MCP 설치 (CMD)
claude mcp add supabase -s user -- cmd /c npx -y @anthropic/supabase-mcp --access-token <토큰>

로컬 스토리지 vs 클라우드 DB: - 로컬 스토리지: 해당 브라우저에서만 데이터가 보임, 다른 사용자/기기에서 접근 불가 - Supabase DB: 모든 사용자가 동일한 데이터를 실시간으로 공유

⚠️ 최신 업데이트: MCP 생태계가 빠르게 확장 중이다. 2026년 3월 기준 주요 서비스(Notion, GitHub, Slack, Linear 등)에서 공식 MCP 서버를 제공하고 있으며, 구글에서 "서비스명 + MCP"로 검색하면 설치 방법을 찾을 수 있다.

핵심 체크포인트

• MCP = AI가 외부 서비스와 통신하는 표준 프로토콜, Claude Code에 MCP 클라이언트 내장
• claude mcp add로 설치, claude mcp list로 관리, /mcp로 실행 중 확인
• GitHub + Vercel + Supabase 조합으로 코드 관리 → 배포 → DB 연동까지 완전한 파이프라인

부록 A: 용어 사전

부록 B: Claude Code 명령어 비교표

슬래시 명령어 vs 커스텀 명령어 vs 에이전트

MCP 설치 방법 비교 (CMD vs PowerShell)

부록 C: 추천 참고 자료 & 링크

공식 문서

• Claude Code 공식 문서
• MCP 공식 문서
• OpenRouter 문서

교재 / 실습

• 교재 GitHub (프롬프트 모음)
• 한빛미디어 — 혼자 공부하는 바이브 코딩 with 클로드 코드

MCP 서버 검색

• MCP 서버 디렉토리 (Anthropic)
• Smithery.ai — MCP 마켓플레이스
• 구글 검색: "서비스명 + MCP" (예: "Notion MCP", "GitHub MCP")

배포 플랫폼

• Vercel — 프론트엔드 자동 배포
• Supabase — 클라우드 데이터베이스
• GitHub — 소스코드 저장/관리